<template>
  <div>
    <div class="XboxTop">
      <div class="XboxTop_title"></div>
    </div>
    <div class="XboxTop_con">
      <div style="width: 100%; height: 100%" ref="Ech"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  //变量
  data() {
    return {
      Echarts: null,
    };
  },
  //初始
  mounted() {
    this.$nextTick(() => {
      this.Echarts = echarts.init(this.$refs.Ech, "macarons");
      this.echInit();
      window.addEventListener("resize", () => {
        //重置容器高宽
        echarts.resize();
      });
    });
  },
  //事件
  methods: {
    echInit() {
      let option = {
        backgroundColor: "#061740",
        // tooltip: {
        //   formatter: "{a} <br/>{b} : {c}%",
        //   textStyle: {
        //     color: "#fff",
        //     fontSize: 40,
        //   },
        // },
        series: [
          {
            name: "",

            type: "gauge",
            radius: "90%",
            center: ["50%", "55%"],
            progress: {
              show: true,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value}",
            },
            // itemStyle: {
            //   color:"transparent"
            // },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "rgba(0, 247, 247, 0)",
                },
                {
                  offset: 1,
                  color: "rgba(3, 129, 244, 0)",
                },
              ]),
            },
            axisLine: {
              show: true,
              distance: 10,
              lineStyle: {
                // width: 30,
                color: [
                  [1 / 4, '#0bc456'],
                  [1 / 2, '#0bc456'],
                  [3 / 4, '#f69b02'],
                  [1, '#fe4837'],
                ],
              },
            }, //仪表盘轴线
            axisLabel: {
              color: "#fff",
            },
            splitLine: {
              lineStyle: {
                color: "#fff",

              },
            },
            pointer: {
              itemStyle: {
                color: '#4C80FD'
              }
            },
            detail: {
              valueAnimation: true,
              fontSize: 40,
              color: "#FFF",
              offsetCenter: [0, '50%']
            },
            data: [
              {
                value: 50,
                name: "",
              },
            ],
          },
        ],

      };
      this.Echarts.setOption(option);
    },
  },
  //销毁
  beforeDestroy() { },
};
</script>
<style scoped></style>
